<template>
  <div id="app">
    <!-- <img alt="Vue logo" :src="userInfo.avatar">
    <h2>{{ userInfo.name | fun }}</h2> -->
    <ul>
      <li v-for="(item ,index) in list" :key="index" @click="fun(index)">{{item}}</li>
    </ul>
    <one v-if="index == 0"></one>
    <two  v-else-if="index == 1"></two>
    <three v-else-if="index == 2"></three>
    <four  v-else></four>
  </div>
</template>
<script>
import login from './mixin/login.js'//mixin 引入
import one from './components/one.vue'//mixin 引入
import two from './components/two.vue'//mixin 引入
import three from './components/three.vue'//mixin 引入
import four from './components/four.vue'//mixin 引入
export default {
  name: 'App',
  data(){
    return{
      list:['推荐','视频','娱乐','游戏'],
      index:0,
      userInfo:{
        name:'里斯',
      },
    }
  },
  components: {
    one,two,three,four
  },
  mixins:[ login ],//mixin混入 以mixins声明  固定的声明方式
  mounted(){
    // this.mixinFun();
  },
  methods:{
    fun(index){
      this.index = index
    }
    // mixinFun(){
    //   console.log('111')
    // }
    
  }
}
</script>

<style>
*{
  line-height: 60px;
  text-align: center;
}
ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
ul > li{
  text-align: center;
  list-style: none;
  display: inline-block;
}

</style>
